<template>
	<div class="app-container">
		<el-card class="box-card">
			<h3>账号列表</h3>
			<el-form label-width="80px">
				<el-form-item label="账号状态">
					<el-select v-model="value" placeholder="请选择筛选账号状态" @change="changeOption">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>

			<myTable :tabelHeader="tableHeader" :tableData="table" v-on:tableCellClick="tableCellClick"></myTable>
			<!--   @handleSelectionChange       @tableCellClick      -->
		</el-card>

		<!-- 批量生成dialog -->
		<el-dialog title="批量生成账号" :visible.sync="dialogFormVisible">
			<el-form :rules="rules" :model="user" label-width="150px" ref="ruleForm">
				<el-form-item label="默认金额" prop="balance">
					<el-input v-model.number="user.balance" />
				</el-form-item>
				<el-form-item label="生成个数" prop="number">
					<el-input v-model.number="user.number" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="createYes('ruleForm')">确 定</el-button>
				<el-button @click="createNo">取 消</el-button>
			</div>
		</el-dialog>

		<div class="op-container">
			<!-- <el-button type="primary" @click="queryAllUser">请求刷新</el-button> -->
			<el-button type="primary" @click="flashList">刷新数据</el-button>
			<el-button type="success" @click="dialogFormVisible = true">批量生成</el-button>
			<el-button type="info" @click="exportExcel">列表导出</el-button>
			<!-- @click="onMoudelMsg" -->
		</div>
	</div>
</template>

<style>
</style>

<script>
	import {
		queryAllUser,
		createUsers
	} from '../../../api/index';
	import myTable from '../../table';
	export default {
		name: 'queryAllUser',
		components: {
			myTable
		},
		data() {
			return {
				options: [{
					value: '',
					label: '全部'
				}, {
					value: '1',
					label: '已使用'
				}, {
					value: '0',
					label: '未使用'
				}],
				value: '',
				//导出的表格
				tableData: [],
				// 新建账号
				user: {
					balance: null,
					number: null
				},
				// 新建商户非空规则
				rules: {
					balance: [{
						required: true,
						message: '账号默认金额不能为空',
						trigger: ['blur', 'change']
					}, {
						type: 'number',
						message: '账号默认金额必须为数字值'
					}],
					number: [{
						required: true,
						message: '生成个数不能为空',
						trigger: ['blur', 'change']
					}, {
						type: 'number',
						message: '生成个数必须为数字值'
					}]
				},
				// 创建商户dialog  默认不显示
				dialogFormVisible: false,
				//表头数据
				tableHeader: [{
						type: 'selection',
						value: 'selection',
						key: 'id',
					},
					// {
					// 	type: 'text',
					// 	value: '用户id',
					// 	key: 'id'
					// },
					{
						type: 'text',
						value: '账号名',
						key: 'username'
					},
					{
						type: 'text',
						value: '密码',
						key: 'password'
					},
					{
						type: 'text',
						value: '账号余额',
						key: 'balance'
					},
					{
						type: 'text',
						value: '账号状态',
						key: 'status'
					}
				],
				//表格数据
				table: []
			};
		},
		computed: {
			headers() {
				return {};
			}
		},
		created() {
			this.queryAllUser();
		},

		methods: {
			// 账号状态筛选
			changeOption(e) {
				if (!e) {
					console.log('空，搜索全部')
				} else if (e == "1") {
					console.log('已使用')
				} else if (e == "0") {
					console.log('未使用')
				}

				this.queryAllUser(e)
			},
			//   请求刷新
			flashList: function() {
				this.table = []
				queryAllUser()
					.then(res => {
						console.log(res);
						res.forEach((items, i) => {
							if (items.deleteId == 1) {
								items.status = "已使用"
							} else {
								items.status = "未使用"
							}
						})	
						this.value=''
						this.table = res;
					})
					.catch(err => {
						console.log(err);
					});
			
			},
			//   搜索列表
			queryAllUser: function(e) {
				this.table = []
				queryAllUser()
					.then(res => {
						console.log(res);
						// this.table = res;
						res.forEach((items, i) => {
							if (items.deleteId == 1) {
								items.status = "已使用"
							} else {
								items.status = "未使用"
							}
						})

						if (!e) {
							console.log('空，搜索全部')
							console.log(res);
							this.table = res;
						} else if (e == "1") {
							console.log('已使用')
							var yesUse = []
							res.forEach((items, i) => {
								if(items.deleteId == 1){
									yesUse.push(items)
								}
							})
							this.table = yesUse;
						} else if (e == "0") {
							console.log('未使用')
							var noUse = []
							res.forEach((items, i) => {
								if(items.deleteId == 0){
									noUse.push(items)
								}
							})
							this.table = noUse;
						}




					})
					.catch(err => {
						console.log(err);
					});

			},
			// 点击导出
			exportExcel() {
				if (this.tableData.length == 0) {
					this.$notify.error({
						title: '失败',
						message: '创建失败,未选择数据!'
					});
				} else {
					this.export2Excel()
				}

			},
			//        导出excle的2个方法
			export2Excel() {
				require.ensure([], () => {
					const {
						export_json_to_excel
					} = require('../../../utils/excel/Export2Excel.js');
					const tHeader = ['用户名', '密码'];
					const filterVal = ['username', 'password'];
					const list = this.tableData;
					const data = this.formatJson(filterVal, list);
					export_json_to_excel(tHeader, data, '列表');
				})
			},
			formatJson(filterVal, jsonData) {
				return jsonData.map(v => filterVal.map(j => v[j]))
			},
			//onMoudelMsg    表格分页回调
			tableCellClick(data) {
				this.tableData.length = 0
				console.log(data)
				this.tableData = data
				// let btnType = data.type
				// let itemData = data.data
				// console.log(btnType)
				// console.log(itemData)
			},

			// 确定创建
			createYes(formName) {
				var data = this.user
				this.$refs[formName].validate((valid) => {
					if (valid) {
						console.log(this.user)
						// var data = this.user
						createUsers(data).then(res => {
							console.log(res)
							this.queryAllUser()
							this.dialogFormVisible = false
							this.$notify.success({
								title: '成功',
								message: '创建成功'
							});
						}).catch(err => {
							console.log(err)
							this.$notify.error({
								title: '失败',
								message: '创建失败'
							});
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});

			},
			// 取消创建
			createNo() {
				this.dialogFormVisible = false
				this.reset()
			},
			//表单重置
			reset() {
				this.user = {
					password: '',
					username: '',
					shopname: '',
					address: ''
				}
			},




		}
	};
</script>
